const triggerClick = () => {}

const triggerXHR = () => {
  const oReq = new XMLHttpRequest()
  oReq.addEventListener('load', () => {})
  oReq.open('POST', '/oncollect/http')
  oReq.send('post data')
  oReq.timeout = 1000
  window.SdkClient.config({ pid: 'pid after xhr' })
}

const triggerXHR2 = () => {
  const oReq = new XMLHttpRequest()
  oReq.addEventListener('load', () => {})
  oReq.open('POST', 'http://localhost:8080/oncollect/xhr')
  oReq.send()
  oReq.timeout = 1000
}

const routeChange = () => {
  const url = new URL(window.location.href)
  url.searchParams.set('foo', 'bar')
  window.history.pushState({}, 'newPid', '/newPid')
  window.SdkClient.config({ pid: 'new pid' })
}

const triggerFetch = () => {
  fetch('/oncollect/http')
}
const triggerFetchWithBody = () => {
  fetch('/oncollect/http', {
    method: 'post',
    body: 'post data',
  })
}

const triggerJsError = () => {
  JSON.parse((window as any).p.p)
}

const triggerJsLoad = () => {
  window.loadScript('https://m.toutiao.com/oncollect.js')
}

const triggerCssLoad = () => {
  window.loadLink('https://m.toutiao.com/oncollect.css')
}

const triggerCapturePromiseRejection = () => {
  new Promise((_resolve, reject) => {
    reject('test')
  })
}

const triggerResourceError = () => {
  window.loadScript('https://m.toutiao.com/oncollect.fail')
}

const triggerResourceError2 = () => {
  window.loadScript('https://m.toutiao.com/oncollect.fail2')
}

const triggerEmptyResourceError = () => {
  window.loadScript('')
}

const triggerCssLoadError = () => {
  window.loadLink('https://m.toutiao.com/oncollect.fail')
}

const triggerSetContext = () => {
  window.SdkClient('context.merge', {
    merge: true,
  })
}
const AddBreadcrumb = () => {
  window.SdkClient('addBreadcrumb', {
    type: 'xx',
    message: '1',
    category: '1',
    timestamp: 222,
  })
}

const triggerConsoleError = () => {
  console.error('test')
}
const hanNonAssociation = () => {}
export const TriggerEvent = () => {
  return (
    <>
      <button id="trigger-click" onClick={triggerClick}>
        trigger-click
      </button>
      <button id="trigger-xhr" onClick={triggerXHR}>
        trigger-xhr
      </button>
      <button id="trigger-xhr-2" onClick={triggerXHR2}>
        trigger-xhr-2
      </button>
      <button id="route-change" onClick={routeChange}>
        routeChange
      </button>
      <button id="trigger-fetch" onClick={triggerFetch}>
        trigger-fetch
      </button>
      <button id="trigger-fetch-with-body" onClick={triggerFetchWithBody}>
        trigger-fetch-with-body
      </button>
      <button data-apm-action="trigger-js_action_name" id="trigger-js-error" onClick={triggerJsError}>
        trigger-js-error
      </button>
      <button id="trigger-capture-promise-rejection" onClick={triggerCapturePromiseRejection}>
        trigger-capture-promise-rejection
      </button>
      <button data-apm-action="span-trigger-js_action_name">
        <span id="span-trigger-js-error" onClick={triggerJsError}>
          span trigger-js-error
        </span>
      </button>
      <button id="non-association-action" data-apm-action="non-association-action-name" onClick={hanNonAssociation}>
        trigger non-association action
      </button>
      <button id="add-breadcrumb" onClick={AddBreadcrumb}>
        add-breadcrumb
      </button>
      <button id="trigger-js-load" onClick={triggerJsLoad}>
        trigger-js-load
      </button>
      <button id="trigger-css-load" onClick={triggerCssLoad}>
        trigger-css-load
      </button>
      <button id="trigger-empty-resource-error" onClick={triggerEmptyResourceError}>
        trigger-empty-resource-error
      </button>
      <button id="trigger-resource-error" onClick={triggerResourceError}>
        trigger-resource-error
      </button>
      <button id="trigger-resource-error2" onClick={triggerResourceError2}>
        trigger-resource-error2
      </button>
      <button id="trigger-css-load-error" onClick={triggerCssLoadError}>
        trigger-css-load-error
      </button>
      <button id="trigger-set-context" onClick={triggerSetContext}>
        trigger-set-context
      </button>
      <button id="trigger-console-error" onClick={triggerConsoleError}>
        trigger-console-error
      </button>
    </>
  )
}
